<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>web前端基础 | web前端面试题集锦</title>
  <meta name="keywords" content=" 前端基础 ">
  <meta name="description" content="web前端基础 | web前端面试题集锦">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="categories">
<meta property="og:url" content="http://blog.duans.top/categories/index.html">
<meta property="og:site_name" content="web前端面试题集锦">
<meta property="og:locale" content="zh">
<meta property="article:published_time" content="2020-03-25T03:44:47.000Z">
<meta property="article:modified_time" content="2020-03-25T03:45:03.696Z">
<meta property="article:author" content="duans">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.0.1" rel="stylesheet">

<link href="/css/hl_theme/github.css?v=1.0.1" rel="stylesheet">

<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/jquery.autocomplete.min.js?v=1.0.1" ></script>

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>



<script src="/js/iconfont.js?v=1.0.1" ></script>

<meta name="generator" content="Hexo 4.2.0"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="true">
  <input class="theme_blog_path" value="">
</div>

<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/" class="avatar_target">
    <img class="avatar" src="/img/avatar.jpg" />
</a>
<div class="author">
    <span>duans</span>
</div>

<div class="icon">
    
        
        <a title="oschina" href="https://gitee.com/duans" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-oschina"></use>
                </svg>
            
        </a>
        
    
        
        <a title="jianshu" href="https://www.jianshu.com/u/6345254fa137" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-jianshu"></use>
                </svg>
            
        </a>
        
    
        
        <a title="github" href="https://github.com/duanshaobo" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            
        </a>
        
    
        
        <a title="email" href="mailto:duanshaobo@126.com" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-email"></use>
                </svg>
            
        </a>
        
    
</div>




<ul>
    <li><div class="all active">全部文章<small>(22)</small></div></li>
    
        
            
            <li><div data-rel="web前端"><i class="fold iconfont icon-right"></i>web前端<small>(16)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="前端面试题">前端面试题<small>(16)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="web服务器">web服务器<small>(2)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="数据库">数据库<small>(2)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="web后端">web后端<small>(2)</small></div>
                
            </li>
            
        
    
        
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
    
    
    
    
    </div>
    <div></div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="22">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="back-title-list"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="https://www.duans.top/">duans</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <form onkeydown="if(event.keyCode === 13){return false;}">
        <input id="local-search-input" class="search" type="text" placeholder="Search..." />
        <i class="cross"></i>
        <span>
            <label for="tagswitch">Tags:</label>
            <input id="tagswitch" type="checkbox" style="display: none" />
            <i id="tagsWitchIcon"></i>
        </span>
    </form>
    <div class="tags-list">
    
    <li class="article-tag-list-item">
        <a class="color4">vue</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">前端基础</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">react</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">minapp</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">javascript</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">angular</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">mongodb</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">jquery</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">nginx</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">mysql</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">apache</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">webapi</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">性能优化</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">ajax</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">html5</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">css3</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es6</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es7</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es8</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">代码分析</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">js基础</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">构建工具</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">混合app</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">混合开发</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">webSocket</a>
    </li>
    
    <div class="clearfix"></div>
</div>

    
    <nav id="title-list-nav">
        
        <a  class="web后端 "
           href="/2020/03/24/server/nodejs/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="nodejs">nodejs</span>
            <span class="post-date" title="2020-03-24 15:40:21">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/angular/"
           data-tag="angular"
           data-author="" >
            <span class="post-title" title="angular">angular</span>
            <span class="post-date" title="2020-03-24 11:56:09">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/javascript/"
           data-tag="javascript"
           data-author="" >
            <span class="post-title" title="javascript基础">javascript基础</span>
            <span class="post-date" title="2020-03-24 11:43:12">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/jquery/"
           data-tag="jquery"
           data-author="" >
            <span class="post-title" title="jquery">jquery</span>
            <span class="post-date" title="2020-03-24 11:44:09">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/minapp/"
           data-tag="minapp"
           data-author="" >
            <span class="post-title" title="微信小程序">微信小程序</span>
            <span class="post-date" title="2020-03-24 11:00:34">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/react/"
           data-tag="react"
           data-author="" >
            <span class="post-title" title="react">react</span>
            <span class="post-date" title="2020-03-24 10:58:53">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/vue/"
           data-tag="vue"
           data-author="" >
            <span class="post-title" title="vue">vue</span>
            <span class="post-date" title="2020-03-24 10:59:46">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/websocket/"
           data-tag="webSocket"
           data-author="" >
            <span class="post-title" title="webSocket">webSocket</span>
            <span class="post-date" title="2020-03-24 13:17:01">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/web-base/"
           data-tag="前端基础"
           data-author="" >
            <span class="post-title" title="web前端基础">web前端基础</span>
            <span class="post-date" title="2020-03-24 10:59:46">2020/03/24</span>
        </a>
        
        <a  class="web后端 "
           href="/2020/03/24/server/php/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="php">php</span>
            <span class="post-date" title="2020-03-24 15:42:33">2020/03/24</span>
        </a>
        
        <a  class="web服务器 "
           href="/2020/03/24/server/nginx/"
           data-tag="nginx"
           data-author="" >
            <span class="post-title" title="nginx">nginx</span>
            <span class="post-date" title="2020-03-24 15:43:15">2020/03/24</span>
        </a>
        
        <a  class="web服务器 "
           href="/2020/03/24/server/apache/"
           data-tag="apache"
           data-author="" >
            <span class="post-title" title="apache">apache</span>
            <span class="post-date" title="2020-03-24 15:43:29">2020/03/24</span>
        </a>
        
        <a  class="数据库 "
           href="/2020/03/24/server/mysql/"
           data-tag="mysql"
           data-author="" >
            <span class="post-title" title="mysql">mysql</span>
            <span class="post-date" title="2020-03-24 15:46:19">2020/03/24</span>
        </a>
        
        <a  class="数据库 "
           href="/2020/03/24/server/mongodb/"
           data-tag="mongodb"
           data-author="" >
            <span class="post-title" title="mongodb">mongodb</span>
            <span class="post-date" title="2020-03-24 15:46:36">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/webapi/"
           data-tag="webapi"
           data-author="" >
            <span class="post-title" title="webapi">webapi</span>
            <span class="post-date" title="2020-03-25 14:41:05">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/optimize/"
           data-tag="性能优化"
           data-author="" >
            <span class="post-title" title="前端性能优化">前端性能优化</span>
            <span class="post-date" title="2020-03-25 15:35:20">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/ajax/"
           data-tag="ajax"
           data-author="" >
            <span class="post-title" title="ajax数据交互">ajax数据交互</span>
            <span class="post-date" title="2020-03-25 15:40:58">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/h5c3/"
           data-tag="html5,css3"
           data-author="" >
            <span class="post-title" title="h5c3新特性">h5c3新特性</span>
            <span class="post-date" title="2020-03-25 15:50:04">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/es678/"
           data-tag="es6,es7,es8"
           data-author="" >
            <span class="post-title" title="ES6/7/8">ES6/7/8</span>
            <span class="post-date" title="2020-03-25 15:57:17">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/analysis/"
           data-tag="代码分析,js基础"
           data-author="" >
            <span class="post-title" title="js代码分析">js代码分析</span>
            <span class="post-date" title="2020-03-25 16:22:27">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/devtools/"
           data-tag="构建工具"
           data-author="" >
            <span class="post-title" title="前端构建工具">前端构建工具</span>
            <span class="post-date" title="2020-03-25 16:39:16">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/hybird/"
           data-tag="混合app,混合开发"
           data-author="" >
            <span class="post-title" title="混合开发">混合开发</span>
            <span class="post-date" title="2020-03-25 16:57:29">2020/03/25</span>
        </a>
        
    </nav>
</div>
    </div>
    <div class="hide-list">
        <div class="semicircle">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div class="post">
    <div class="pjax">
        <article id="post-client/web-base" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">web前端基础</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            
                <a  data-rel="web前端">web前端</a>/
            
                <a  data-rel="前端面试题">前端面试题</a>
            
        </span>
        
        
        <span class="tag">
            
            <a class="color5">前端基础</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
        创建时间:<time class="date" title='更新时间: 2020-03-25 15:53:33'>2020-03-24 10:59</time>
        
    </div>
    <div class="article-meta">
        
        
        <span id="busuanzi_container_page_pv">
            阅读:<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
        <span class="top-comment" title="跳转至评论区">
            <a href="#comments">
                评论:<span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </a>
        </span>
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML"><span class="toc-text">HTML</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Html5新增那些标签"><span class="toc-text">Html5新增那些标签?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#行内元素和块级元素的具体区别是什么？"><span class="toc-text">行内元素和块级元素的具体区别是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#列举几个块级标签和行内标签？"><span class="toc-text">列举几个块级标签和行内标签？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#行内元素的padding和margin可设置吗？"><span class="toc-text">行内元素的padding和margin可设置吗？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#简述readyonly与disabled的区别"><span class="toc-text">简述readyonly与disabled的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#哪些标签都存在伪元素"><span class="toc-text">哪些标签都存在伪元素?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#伪元素可以使用js来操作吗"><span class="toc-text">伪元素可以使用js来操作吗?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Html5的网页为什么只需要写"><span class="toc-text">Html5的网页为什么只需要写?</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Css"><span class="toc-text">Css</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#px-em-rem-这三中长度单位的区别？"><span class="toc-text">px em rem 这三中长度单位的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#谈谈css选择器优先级顺序以及判定标准"><span class="toc-text">谈谈css选择器优先级顺序以及判定标准?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#position-几个属性的作用？"><span class="toc-text">position 几个属性的作用？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#position设置为absolue和fixed有什么区别"><span class="toc-text">position设置为absolue和fixed有什么区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#在一个页面中给多个元素设置相同的id-会导致什么问题"><span class="toc-text">在一个页面中给多个元素设置相同的id, 会导致什么问题?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#用伪类实现一个上三角"><span class="toc-text">用伪类实现一个上三角?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#怎么让一个不定宽高的-div，垂直水平居中？"><span class="toc-text">怎么让一个不定宽高的 div，垂直水平居中？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#清除浮动有哪些常用的方式"><span class="toc-text">清除浮动有哪些常用的方式?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#让两个块级元素在一行显示有哪些做法"><span class="toc-text">让两个块级元素在一行显示有哪些做法?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#如何设置一个元素在垂直方向居中"><span class="toc-text">如何设置一个元素在垂直方向居中?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#说说图片懒加载的原理-实际开发中用过哪些图片懒加载的插件"><span class="toc-text">说说图片懒加载的原理?实际开发中用过哪些图片懒加载的插件?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#display-none和visibility-hidden的区别"><span class="toc-text">display:none和visibility:hidden的区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Less是什么"><span class="toc-text">Less是什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Scss是什么-sass"><span class="toc-text">Scss是什么?(sass)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Stylus是什么-styl"><span class="toc-text">Stylus是什么?(.styl)</span></a></li></ol></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h1><h2 id="Html5新增那些标签"><a href="#Html5新增那些标签" class="headerlink" title="Html5新增那些标签?"></a>Html5新增那些标签?</h2><p>布局标签:<br>header,section,footer,article,aside<br>表单标签: datalist,<br>input:type=’week|date|time|datetime|number|search|url|tel|color|email|range’<br>多媒体标签: audio(音频), video(视频)<br>其他标签: progress(进度条),meter(度量器)<br>补充:<br>Html5新属性:<br>hidden(隐藏元素),required(必填),minlength(最小长度),maxlength(最大长度),pattern(正则表达式),placeholder(提示文本),autocomplete(自动填充),autofocus(自动获取焦点)</p>
<h2 id="行内元素和块级元素的具体区别是什么？"><a href="#行内元素和块级元素的具体区别是什么？" class="headerlink" title="行内元素和块级元素的具体区别是什么？"></a>行内元素和块级元素的具体区别是什么？</h2><p>块级元素独占一行页面空间, 不会和其他元素共享一行页面空间;<br>行内元素可以和其他非块级元素(行内,行内块)共享一行页面空间.</p>
<h2 id="列举几个块级标签和行内标签？"><a href="#列举几个块级标签和行内标签？" class="headerlink" title="列举几个块级标签和行内标签？"></a>列举几个块级标签和行内标签？</h2><p>块级标签:div,p,h1~h6,section,header,footer<br>行内标签:span,em(i),strong(b),u,em(i),a</p>
<h2 id="行内元素的padding和margin可设置吗？"><a href="#行内元素的padding和margin可设置吗？" class="headerlink" title="行内元素的padding和margin可设置吗？"></a>行内元素的padding和margin可设置吗？</h2><p>行内元素设置水平方向的padding和margin是可以生效,但是设置垂直方向的padding和margin虽然看起来对标签起作用,但实际并没有对周围元素产生任何影响, 所以行内元素设置垂直方向的padding和margin是无效的.</p>
<h2 id="简述readyonly与disabled的区别"><a href="#简述readyonly与disabled的区别" class="headerlink" title="简述readyonly与disabled的区别"></a>简述readyonly与disabled的区别</h2><p>readyonly是设置表单元素为只读状态;<br>disabled是设置表单元素为禁用状态.</p>
<h2 id="哪些标签都存在伪元素"><a href="#哪些标签都存在伪元素" class="headerlink" title="哪些标签都存在伪元素?"></a>哪些标签都存在伪元素?</h2><p>大部分容器标签(大部分双标签)都有伪元素, iframe没有伪元素;<br>大部分单标签都没有伪元素, 但是img有伪元素</p>
<h2 id="伪元素可以使用js来操作吗"><a href="#伪元素可以使用js来操作吗" class="headerlink" title="伪元素可以使用js来操作吗?"></a>伪元素可以使用js来操作吗?</h2><p>js不可以操作伪元素</p>
<h2 id="Html5的网页为什么只需要写"><a href="#Html5的网页为什么只需要写" class="headerlink" title="Html5的网页为什么只需要写?"></a>Html5的网页为什么只需要写<!DOCTYOE HTML>?</h2><p>HTML ## 01 中的 doctype 需要对 DTD 进行引用，因为 HTML ## 01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的, 而HTML5不是的。</p>
<h1 id="Css"><a href="#Css" class="headerlink" title="Css"></a>Css</h1><h2 id="px-em-rem-这三中长度单位的区别？"><a href="#px-em-rem-这三中长度单位的区别？" class="headerlink" title="px em rem 这三中长度单位的区别？"></a>px em rem 这三中长度单位的区别？</h2><p>px是一个绝对单位;em和rem是一个相对单位, em参考的是当前元素的字体(font-size)大小, 参考的是页面根元素html的字体(font-size)大小.</p>
<h2 id="谈谈css选择器优先级顺序以及判定标准"><a href="#谈谈css选择器优先级顺序以及判定标准" class="headerlink" title="谈谈css选择器优先级顺序以及判定标准?"></a>谈谈css选择器优先级顺序以及判定标准?</h2><p>优先级从低到高:<br>通配符选择器&lt;标签选择器&lt;类选择器(属性选择器)&lt;ID选择器;<br>行内样式&lt;使用!important修饰的属性优先级最高;<br>如果两个选择器(属性完全相同)同时命中一个元素, 并且权重一样, 则书写顺序会影响优先级, 后一个选择器的属性会覆盖前一个选择器中相同的属性.</p>
<h2 id="position-几个属性的作用？"><a href="#position-几个属性的作用？" class="headerlink" title="position 几个属性的作用？"></a>position 几个属性的作用？</h2><p>position 的常见四个属性值： relative，absolute，fixed，static。一般都要配合”left”、”top”、”right”以及”bottom” 属性使用。<br>1）static：默认位置，（static 元素会忽略任何 top、 bottom、left 或 right 声明）。一般不常用。<br>2）relative：位置被设置为 relative 的元素，偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移。注意 relative 移动后的元素在原来的位置仍占据空间。<br>3）absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位 置。<br>4）fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元 素都会留在那个位置。它始终是以 body 为依据的。注意设置 fixed 属性的元素在标准流中不占位置。</p>
<h2 id="position设置为absolue和fixed有什么区别"><a href="#position设置为absolue和fixed有什么区别" class="headerlink" title="position设置为absolue和fixed有什么区别?"></a>position设置为absolue和fixed有什么区别?</h2><p>absolute是绝对定位, 绝对定位参考的是有明确定位的父元素, 如果直接父元素没有明确定位会一直向上查找,如果父元素都没有明确定位,则参考body标签;<br>fixed是固定定位, 参考对象是浏览器.</p>
<h2 id="在一个页面中给多个元素设置相同的id-会导致什么问题"><a href="#在一个页面中给多个元素设置相同的id-会导致什么问题" class="headerlink" title="在一个页面中给多个元素设置相同的id, 会导致什么问题?"></a>在一个页面中给多个元素设置相同的id, 会导致什么问题?</h2><p>会导致通过js获取dom元素的时候, 只能获取到第一个元素, 后面的元素都无法正常获取.</p>
<h2 id="用伪类实现一个上三角"><a href="#用伪类实现一个上三角" class="headerlink" title="用伪类实现一个上三角?"></a>用伪类实现一个上三角?</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'triangle_border_up'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.triangle_border_up</span>&#123;<br>    <span class="hljs-attribute">border</span>:<span class="hljs-number">20px</span> solid red;<br>    <span class="hljs-attribute">border-top</span>:<span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">border-left</span>:<span class="hljs-number">20px</span> solid transparent;<br>    <span class="hljs-attribute">border-right</span>:<span class="hljs-number">20px</span> solid transparent; <br>    <span class="hljs-attribute">width</span>:<span class="hljs-number">0px</span>;<br>&#125;<br></code></pre></td></tr></table></figure>


<h2 id="怎么让一个不定宽高的-div，垂直水平居中？"><a href="#怎么让一个不定宽高的-div，垂直水平居中？" class="headerlink" title="怎么让一个不定宽高的 div，垂直水平居中？"></a>怎么让一个不定宽高的 div，垂直水平居中？</h2><p>方案一:transform</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.parent</span>&#123;<br>    <span class="hljs-attribute">background</span>: <span class="hljs-number">#DDD</span>;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;<br>&#125;<br><span class="hljs-selector-class">.son</span>&#123;<br>    <span class="hljs-attribute">position</span>: relative;<br>    <span class="hljs-attribute">background</span>: pink;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;<br>    <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;<br>    <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(-<span class="hljs-number">50%</span>,-<span class="hljs-number">50%</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>方案二:flex弹性布局</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.parent</span>&#123;<br>    <span class="hljs-attribute">display</span>: flex;<br>    <span class="hljs-attribute">justify-content</span>: center;<br>    <span class="hljs-attribute">align-items</span>: center;<br>    <span class="hljs-attribute">background</span>: <span class="hljs-number">#DDD</span>;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;<br>&#125;<br><span class="hljs-selector-class">.son</span>&#123;<br>    <span class="hljs-attribute">background</span>: pink;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>&#125;<br></code></pre></td></tr></table></figure>
<p>方案三:绝对定位</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.parent</span>&#123;<br>    <span class="hljs-attribute">position</span>: relative;<br>    <span class="hljs-attribute">background</span>: <span class="hljs-number">#DDD</span>;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;<br>&#125;<br><span class="hljs-selector-class">.son</span>&#123;<br>    <span class="hljs-attribute">position</span>: absolute;<br>    <span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">bottom</span>:<span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">right</span>:<span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">background</span>: pink;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">margin</span>: auto;<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="清除浮动有哪些常用的方式"><a href="#清除浮动有哪些常用的方式" class="headerlink" title="清除浮动有哪些常用的方式?"></a>清除浮动有哪些常用的方式?</h2><p>额外标签法: 在浮动元素的最后添加一个块级标签, 给其设置一个clear:both的属性 (缺点:会在页面上产生很多空白标签);<br>给浮动元素的父元素设置高度:(缺点:不太灵活);<br>给浮动元素的父元素设置overflow:hidden;<br>使用伪元素法:(推荐使用)</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.clear</span><span class="hljs-selector-pseudo">:after</span>&#123;<br>    <span class="hljs-attribute">content</span>:<span class="hljs-string">''</span>;<br>    <span class="hljs-attribute">display</span>:block;<br>    <span class="hljs-attribute">overflow</span>:hidden;<br>    <span class="hljs-attribute">visibility</span>:hidden;<br>    <span class="hljs-attribute">clear</span>:both;<br>&#125;<br></code></pre></td></tr></table></figure>


<h2 id="让两个块级元素在一行显示有哪些做法"><a href="#让两个块级元素在一行显示有哪些做法" class="headerlink" title="让两个块级元素在一行显示有哪些做法?"></a>让两个块级元素在一行显示有哪些做法?</h2><p>设置显示模式:<code>display:inline|inline-block;</code><br>flex布局: 给父元素设置display:flex;<br>使用浮动;</p>
<h2 id="如何设置一个元素在垂直方向居中"><a href="#如何设置一个元素在垂直方向居中" class="headerlink" title="如何设置一个元素在垂直方向居中?"></a>如何设置一个元素在垂直方向居中?</h2><p>首先不考虑代码的灵活性, 可以使用margin外边距或者padding内边距来实现元素在垂直方向居中显示.具体可以给父元素设置一个垂直方向的padding内边距; 也可以给需要垂直居中的子元素设置垂直方向的外边距.其次如果这个需要垂直居中的元素是一个单行文本, 则可以使用行高等于标签高度的方式来实现.也可以使用css3中的flex布局, 使用align-items:center设置元素在侧轴(垂直方向)居中对齐.也可以使用绝对定位的方式, 设置元素在相对定位的父元素中垂直对齐.</p>
<h2 id="说说图片懒加载的原理-实际开发中用过哪些图片懒加载的插件"><a href="#说说图片懒加载的原理-实际开发中用过哪些图片懒加载的插件" class="headerlink" title="说说图片懒加载的原理?实际开发中用过哪些图片懒加载的插件?"></a>说说图片懒加载的原理?实际开发中用过哪些图片懒加载的插件?</h2><p>img标签在加载图片的时候, 是通过请求src属性所指向的文件来加载图片的, 那如果img标签本身没有src属性的话, 那么img标签在渲染的时候, 就不会加载图片.所以图片懒加载的原理就是将img标签的src属性给暂时先改成一个自定义的属性, 这样页面已加载就会不去加载图片, 当img标签所在区域进入屏幕可视区域后, 从存放图片路径的自定义属性中获取图片地址,并动态的设置给对应img标签的src属性, 这样浏览器就会自动帮助我们去请求对应的图片资源, 也就实现了所谓的图片懒加载.图片懒加载的插件有很多, 大部分是基于jquery的, 比如jquery.lazyload. 当然vue的中也有实现了图片懒加载的插件, 比如vue-lazyload, vue的组件库中也有图片懒加载的组件.</p>
<h2 id="display-none和visibility-hidden的区别"><a href="#display-none和visibility-hidden的区别" class="headerlink" title="display:none和visibility:hidden的区别?"></a>display:none和visibility:hidden的区别?</h2><p>display:none隐藏元素后,不占位;<br>visibility:hidden隐藏元素后占位.</p>
<h2 id="Less是什么"><a href="#Less是什么" class="headerlink" title="Less是什么?"></a>Less是什么?</h2><p>Less是一种css预处理语言, 在less中可以定义一些变量和表达式以及使用嵌套语法; less中使用@定义变量(@baseColor:pink); 后期可以通过一些编译工具(less)将less编译成浏览器能直接识别的css样式. 所以less只是在开发阶段使用的一种中间语言, 使用less的目的是提高开发效率以及提高代码的可维护性.</p>
<h2 id="Scss是什么-sass"><a href="#Scss是什么-sass" class="headerlink" title="Scss是什么?(sass)"></a>Scss是什么?(sass)</h2><p>scss是一种css预处理语言, 在less中可以定义一些变量和表达式以及使用嵌套语法; scss中使用$定义变量($baseColor:pink); 后期可以通过一些编译工具(node-sass)将less编译成浏览器能直接识别的css样式. 所以scss只是在开发阶段使用的一种中间语言, 使用scss的目的是提高开发效率以及提高代码的可维护性.</p>
<h2 id="Stylus是什么-styl"><a href="#Stylus是什么-styl" class="headerlink" title="Stylus是什么?(.styl)"></a>Stylus是什么?(.styl)</h2><p>stylus是一种css预处理语言, 在stylus中可以定义一些变量和表达式以及使用嵌套语法(stylus中是使用缩进的语法表示嵌套关系); 后期可以通过一些编译工具(stylus)将stylus编译成浏览器能直接识别的css样式. 所以stylus只是在开发阶段使用的一种中间语言, 使用stylus的目的是提高开发效率以及提高代码的可维护性.</p>

      
       <hr><span style="font-style: italic;color: gray;"> 请你也把我遗弃在远方, 让我享受这可怕的绝望, 当你终于感到了悲伤, 我在回来为你歌唱 </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>




    <div id="comments"></div>
<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">

<script src="/js/gitment.js"></script>

<script>
    var gitment = new Gitment({
        id: 'http://blog.duans.top/2020/03/24/client/web-base/', // 可选。默认为 location.href
        owner: 'duanshaobo',
        repo: 'blog.duans.top',
        oauth: {
            client_id: '76fd9510b156417889ed',
            client_secret: 'c63458b7f62b1b672250331443a554f3e8be05b3',
        },
    })
    gitment.render('comments')
</script>




    




    </div>
    <div class="copyright">
        <p class="footer-entry">Copyright©2020 www.duans.top</p>
<!-- <p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p> -->

    </div>
    <div class="full-toc">
        <button class="full"><span class="min "></span></button>
<button class="post-toc-menu"><span class="post-toc-menu-icons"></span></button>
<div class="post-toc"><span class="post-toc-title">目录</span>
    <div class="post-toc-content">

    </div>
</div>
<a class="" id="rocket" ></a>

    </div>
</div>
<div class="acParent"></div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.0.1" ></script>

<script src="/js/script.js?v=1.0.1" ></script>
<script>
    var img_resize = 'default';
    /*作者、标签的自动补全*/
    $(function () {
        $('.search').AutoComplete({
            'data': ['@duans','@duans','#vue','#前端基础','#react','#minapp','#javascript','#angular','#mongodb','#jquery','#nginx','#mysql','#apache','#webapi','#性能优化','#ajax','#html5','#css3','#es6','#es7','#es8','#代码分析','#js基础','#构建工具','#混合app','#混合开发','#webSocket',],
            'itemHeight': 20,
            'width': 418
        }).AutoComplete('show');
    })
    function initArticle() {
        /*渲染对应的表格样式*/
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 582px;
    }
    .nav.fullscreen {
        margin-left: -582px;
    }
    .nav-left {
        width: 160px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 532px;
        }
        .nav.fullscreen {
            margin-left: -532px;
        }
        .nav-left {
            width: 140px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 532px;
            margin-left: -532px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
        .nav .hide-list.fullscreen {
            left: 532px
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    
    .post .pjax article .article-entry>ol, .post .pjax article .article-entry>ul, .post .pjax article>ol, .post .pjax article>ul{
        border: #e2dede solid 1px;
        border-radius: 10px;
        padding: 10px 32px 10px 56px;
    }
    .post .pjax article .article-entry li>ol, .post .pjax article .article-entry li>ul,.post .pjax article li>ol, .post .pjax article li>ul{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .post .pjax article .article-entry>ol>li, .post .pjax article .article-entry>ul>li,.post .pjax article>ol>li, .post .pjax article>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    .post .pjax article .article-entry li>ol>li, .post .pjax article .article-entry li>ul>li,.post .pjax article li>ol>li, .post .pjax article li>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    
    .nav-right:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        background: url("/img/article-list-background-1.jpg");
        background-repeat: no-repeat;
        background-position: 50% 0;
        -ms-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }
    

    
    .post .pjax article :not(pre) > code {
        color: #24292e;
        font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
        background-color: rgba(27,31,35,.05);
        border-radius: 3px;
        font-size: 85%;
        margin: 0;
        padding: .2em .4em;
    }
    
</style>







</html>
